<template>
  <!-- http://localhost:5173/#/hours/WorkingDays -->
  <div>
    <!--  -->
    <QueryBox @resolved="handleResolve" />
    <TableBox
      :data="workData"
      @export="handleExport"
      @showData="showData"
      @showRaw="showRaw"
    />
    <!-- <pre>{{ workData }}</pre> -->
  </div>
</template>

<script setup>
import { ref, h } from "vue";
import { ElNotification, ElMessage, ElMessageBox } from "element-plus";
import QueryBox from "./QueryBox.vue";
import TableBox from "./TableBox.vue";
import exportFile from "./exportFile.js";

const workData = ref([]);
const workRaw = ref([]);
const workRange = ref([]);
const workDeclarations = ref([]);
const handleResolve = ({ data, raw, range, declarations }) => {
  workData.value = data;
  workRaw.value = raw;
  workDeclarations.value = declarations;
  workRange.value = range;
};

const handleExport = () => {
  exportFile(
    workData.value,
    workRaw.value,
    workDeclarations.value,
    workRange.value
  ).then((fileName) => {
    ElNotification({
      type: "success",
      title: "已下载",
      message: fileName + ".xlsx",
    });
  });
};

const showData = (row) => {
  // let data = workData.value[idx];
  let data = row;
  ElMessageBox({
    title: "原始数据",
    message: h("pre", { style: preStyle }, JSON.stringify(data, null, 2)),
    customStyle: msgboxStyle,
  });
};

const showRaw = (uid) => {
  let data = workRaw.value.filter((cell) => cell.userId == uid);
  ElMessageBox({
    title: "打卡数据",
    message: h("pre", { style: preStyle }, JSON.stringify(data, null, 2)),
    customStyle: msgboxStyle,
  });
};

const msgboxStyle = {
  width: "360px",
  // display: "flex",
  // justifyContent: "center",
  // alignItems: "center",
};

const preStyle = {
  padding: "12px",
  margin: "6px",
  fontSize: "12px",
  // textAlign: "left",
  border: "1px solid #8884",
  backgroundColor: "#8881",
  width: "320px",
  // width: "25vw",
  // maxWidth: "420px",
  // minWidth: "280px",
  height: "calc(100vh - 220px)",
  maxHeight: "600px",
  overflowY: "auto",
};
</script>
